<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <title>Psychology Manage System</title>

    <!-- Favicon -->
    <link rel="shortcut icon" href="assets/img/favicon.png">

    <link rel="stylesheet" href="assets/css/element.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">

    <!-- Fontawesome CSS -->
    <link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">


    <!-- Main CSS -->
    <link rel="stylesheet" href="assets/css/style.css">

    <script src="assets/js/vue.js"></script>
    <script src="assets/js/axios.js"></script>
    <script src="assets/util/localStorageUtil.js"></script>
    <script src="assets/util/request.js"></script>
    <script src="assets/util/common.js"></script>
    <script src="assets/js/element.js"></script>


    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.min.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<!-- Main Wrapper -->
<div class="main-wrapper" id="adddimension">

    <!-- Header -->
    <div class="header">

        <!-- Logo -->
        <div class="header-left">
            <a href="profile.html" class="logo">
                <img src="assets/img/logo.png" alt="Logo">
            </a>
            <a href="profile.html" class="logo logo-small">
                <img src="assets/img/logo-small.png" alt="Logo" width="30" height="30">
            </a>
        </div>
        <!-- /Logo -->

        <!-- Sidebar Toggle -->
        <a href="javascript:void(0);" id="toggle_btn">
            <i class="fas fa-bars"></i>
        </a>
        <!-- /Sidebar Toggle -->

        <!-- Mobile Menu Toggle -->
        <a class="mobile_btn" id="mobile_btn">
            <i class="fas fa-bars"></i>
        </a>
        <!-- /Mobile Menu Toggle -->

        <!-- Header Menu -->
        <ul class="nav user-menu">

            <!-- Flag -->
            <li class="nav-item dropdown has-arrow flag-nav">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">
                    <img src="assets/img/flags/zh.png" alt="" height="20"> <span>简体中文</span>
                </a>
                <div class="dropdown-menu dropdown-menu-right">
                    <a href="javascript:void(0);" class="dropdown-item">
                        <img src="assets/img/flags/zh.png" alt="" height="16"> 简体中文
                    </a>
                </div>
            </li>
            <!-- /Flag -->

            <!-- User Menu -->
            <li class="nav-item dropdown has-arrow main-drop">
                <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
							<span class="user-img">
								<img :src="userinfo.figureUrl==='' ? 'assets/img/logo-small.png': userinfo.figureUrl " alt="">
								<span class="status online"></span>
							</span>
                    <span v-html="userinfo.nickname"></span>
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="profile.html"><i data-feather="user" class="mr-1"></i> 个人中心</a>
                    <button class="dropdown-item" onclick="logout()"><i data-feather="log-out" class="mr-1"></i> 注销</button>
                </div>
            </li>
            <!-- /User Menu -->

        </ul>
        <!-- /Header Menu -->

    </div>
    <!-- /Header -->

    <!-- Sidebar -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-inner slimscroll">
            <div id="sidebar-menu" class="sidebar-menu" >
                <ul id="sidebarMenu">
                </ul>
            </div>
        </div>
    </div>
    <!-- /Sidebar -->

    <!-- Page Wrapper -->
    <div class="page-wrapper">
        <div class="content container-fluid">

            <!-- Page Header -->
            <div class="page-header">
                <div class="row align-items-center">
                    <div class="col">
                        <h3 class="page-title">测试/题库管理</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="profile.html">个人中心</a></li>
                            <li class="breadcrumb-item"><a href="dimension.html">维度管理</a></li>
                            <li class="breadcrumb-item active">新增维度页</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- /Page Header -->

            <!-- Search Filter -->


            <!-- /Search Filter -->

            <div class="row">
                <div class="col-sm-12">
                    <el-form ref="form" :rules="rules" :model="form">
                        <el-form-item label="量表大类" prop="scaleType">
                            <el-select
                                    v-model="form.scaleType"
                                    @change="selectType"
                                    filterable
                                    remote
                                    clearable
                                    placeholder="请选择大类">
                                <el-option
                                        v-for="item in typeList"
                                        :key="item.id"
                                        :label="item.typeName"
                                        :value="item.id">

                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="所属量表" prop="scaleId">
                            <el-select
                                    v-model="form.scaleId"
                                    @change="selectScale"
                                    filterable
                                    remote
                                    clearable
                                    placeholder="请选择量表">
                                <el-option
                                        v-for="item in scaleList"
                                        :key="item.scaleId"
                                        :label="item.scaleName"
                                        :value="item.scaleId">

                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="维度描述" prop="dimensionName">
                            <el-col :span="8">
                                <el-input v-model="form.dimensionName" placeholder="维度描述" clearable></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="维度编码" prop="dimensionCode">
                            <el-col :span="8">
                                <el-input v-model="form.dimensionCode" placeholder="维度编码" clearable></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="onSubmit">保存</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
    <!-- /Page Wrapper -->

</div>
<!-- /Main Wrapper -->

<!-- jQuery -->
<script src="assets/js/jquery-3.5.1.min.js"></script>

<!-- Bootstrap Core JS -->
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>

<!-- Feather Icon JS -->
<script src="assets/js/feather.min.js"></script>

<!-- Slimscroll JS -->
<script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>


<!-- Custom JS -->
<script src="assets/js/script.js"></script>

</body>

<script>
    let storage = new Storage();

    var adddimension = new Vue({
        el: '#adddimension',
        data(){
            return{
                //初始页
                userinfo: '',
                typeList:[],
                scaleList:[],
                activePage: '/dimension.html',
                form:{
                    scaleId: null,
                    dimensionName: "",
                    dimensionCode: "",
                    scaleType: null,
                    scaleName: ''
                },
                rules:{
                    dimensionName:[
                        {required: true,message:"请输维度描述",trigger: 'blur'},
                        {min: 1,max: 100,message: '长度 1 到 100 个字符',trigger: 'blur'},
                    ],
                    dimensionCode:[
                        {required: true,message:"请输入维度编码",trigger: 'blur'},
                        {min: 1,max: 20,message: '长度 1 到 20 个字符',trigger: 'blur'},
                    ],
                    scaleType:[
                        {required: true,message:"请输选择大类",trigger: 'blur'},
                    ],
                    scaleId: [
                        {required: true,message:"请选择量表",trigger: 'blur'},
                    ]
                }
            }
        },
        methods: {
            getUserInfo() {
                //设置用户信息
                if(storage.getItem("userinfo")!=null){
                    this.userinfo = storage.getItem("userinfo");
                    initMenu(storage.getItem("routeMap"),this.activePage)
                }else{
                    service.get("/user/getUserInfo").then(res=>{
                        storage.setItem({
                            name: "userinfo",
                            value: res.data.userinfo
                        })
                        storage.setItem({
                            name: "routeMap",
                            value: res.data.routeMap
                        })
                        initMenu(res.data.routeMap,this.activePage)
                        this.userinfo = res.data;
                    });
                }
            },
            onSubmit(){
                if(this.$refs['form'].validate(valid=>{
                    if(valid){
                        service({
                            method: 'post',
                            url: '/dimension/addDimension',
                            data: this.form
                        }).then(res=>{
                            if(res.data){
                                this.$message({message:"新增成功",type:"success"})
                            }
                        })
                    }else{
                        this.$message({message:"数据格式不正确",type:"error"})
                    }
                }));
            },
            selectType(val){
                this.form.scaleType = val;
                this.form.scaleId = null;
                service("/scale/getScaleListByType?scaleType="+val).then(res=>{
                    this.scaleList = res.data
                })
            },
            loadType(){
                return [
                    {"id":10,"typeName":"人际"},
                    {"id":20,"typeName":"学习"},
                    {"id":30,"typeName":"就业"},
                    {"id":40,"typeName":"情感"}
                ]
            }

        },
        created(){
        },
        mounted() {
            this.typeList = this.loadType();
            intThisPoint(this);
            this.getUserInfo();
        },
    })





</script>
</html>
